<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="统计报表">
        <h2>
          <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
          <span>
            总抽成:
            <strong>{{accountInfo.totalAgent}}</strong>
          </span>
          <span>
            总提现:
            <strong>{{accountInfo.totalWith}}</strong>
          </span>
          <span>
            总余额:
            <strong>{{accountInfo.totalMoney}}</strong>
          </span>
        </h2>
      </el-tab-pane>
      <el-tab-pane label="商户提现审核">
        <el-table :data="merChantData" stripe style="width: 100%" border>
          <el-table-column prop="orderNo" label="提现编号" width="180"></el-table-column>
          <el-table-column prop="depositBank" label="开户银行" width="180"></el-table-column>
          <el-table-column prop="depositNo" label="开户账号"></el-table-column>
          <el-table-column prop="depositName" label="开户名"></el-table-column>
          <el-table-column prop="withNum" label="代付金额"></el-table-column>
          <el-table-column prop="serviceChange" label="提现手续费"></el-table-column>
          <el-table-column prop="subdepositBank" label="开户支行"></el-table-column>
          <el-table-column label="地址">
            <template v-slot="{ row }">
              <span>{{ row.province}}/{{ row.cityName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="accountProper" label="账户属性"></el-table-column>
          <el-table-column label="状态">
            <template v-slot="{ row }">
              <span>{{ status[row.status]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="merChant.merName" label="商户名称"></el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="{ row }">
              <el-button size="mini" type="primary" @click="open(row)">同意</el-button>
              <el-button size="mini" type="danger" @click="update(row)">拒绝</el-button>
              <el-button size="mini" type="danger" @click="del(row)">异常</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="dis-center">
          <el-pagination
            @current-change="handleMerChantInfoChange"
            :current-page.sync="merChantInfo.page"
            :page-size.sync="merChantInfo.size"
            layout="prev, pager, next, jumper"
            :total="merChantInfo.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="代理商审核">
        <el-table :data="agentData" stripe style="width: 100%" border>
          <el-table-column prop="orderNo" label="提现编号" width="180"></el-table-column>
          <el-table-column prop="depositBank" label="开户银行" width="180"></el-table-column>
          <el-table-column prop="depositNo" label="开户账号"></el-table-column>
          <el-table-column prop="depositName" label="开户名"></el-table-column>
          <el-table-column prop="withNum" label="代付金额"></el-table-column>
          <el-table-column prop="serviceChange" label="提现手续费"></el-table-column>
          <el-table-column prop="subdepositBank" label="开户支行"></el-table-column>
          <el-table-column prop="province" label="地址">
            <template v-slot="{ row }">
              <span>{{ row.province}}/{{ row.cityName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="accountProper" label="账户属性">
            <template v-slot="{ row }">
              <span>{{ row.accountProper === 1 ? '对私': '对公'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="{ row }">
              <span>{{ status[row.status]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="公司类型">
            <template v-slot="{ row }">
              <span>{{ row.agent.epName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="{ row }">
              <el-button size="mini" type="primary" @click="open(row)">同意</el-button>
              <el-button size="mini" type="danger" @click="update(row)">拒绝</el-button>
              <el-button size="mini" type="danger" @click="del(row)">异常</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="dis-center">
          <el-pagination
            @current-change="handleAgentChange"
            :current-page.sync="agentInfo.page"
            :page-size.sync="agentInfo.size"
            layout="prev, pager, next, jumper"
            :total="agentInfo.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="line-to"></div>
  </div>
</template>

<script>
import { listAccDetail, listWithMerChant } from "@/api/financeManage";
import { listOrder, listWithAgent } from "@/api/dealManage";
import { getAgentProfit } from "@/api/agentManage";
import echarts from "echarts";
const changeType = {
  1: "代付提现",
  2: "手续费",
  3: "拒绝审核退款",
  4: "订单入款"
};
const addSubType = {
  1: "增加",
  2: "减少"
};
const status = {
  1: "处理中",
  2: "处理异常",
  3: "处理成功",
  4: "处理失败"
};
export default {
  name: "financeManage",
  data() {
    return {
      changeType,
      addSubType,
      status,
      pageInfo: {
        page: 1,
        size: 10
      },
      agentInfo: {
        page: 1,
        size: 10
      },
      agentData: [],
      accountInfo: {},
      merChantInfo: {
        page: 1,
        size: 10
      },
      merChantData: []
    };
  },
  methods: {
    getListAccDetail() {
      getAgentProfit().then(res => {
        if (res.data.code === 200) {
          this.accountInfo = res.data.data;
          let myChart = echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            series: [
              {
                type: "pie", // 设置图表类型为饼图
                radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data: [
                  // 数据数组，name 为数据项名称，value 为数据项值
                  { value: this.accountInfo.totalAgent, name: "总抽成" },
                  { value: this.accountInfo.totalWith, name: "总提现" },
                  { value: this.accountInfo.totalMoney, name: "总余额" }
                ]
              }
            ]
          });
        }
      });
    },
    getListWithAgent() {
      listWithAgent().then(res => {
        if (res.data.code === 200) {
          this.agentData = res.data.data;
          this.agentInfo = res.data.pageInfo;
        }
      });
    },
    getListWithMerChant() {
      listWithMerChant().then(res => {
        if (res.data.code === 200) {
          this.merChantData = res.data.data;
          this.merChantInfo = res.data.pageInfo;
        }
      });
    },
    
    handleAgentChange(val) {
      listWithAgent({
        page: val
      }).then(res => {
        if (res.data.code === 200) {
          this.agentData = res.data.data;
          this.agentInfo = res.data.pageInfo;
        }
      });
    },
    handleMerChantInfoChange(val) {
      listWithMerChant({
        page: val
      }).then(res => {
        if (res.data.code === 200) {
          this.merChantData = res.data.data;
          this.merChantInfo = res.data.pageInfo;
        }
      });
    },
    handleCurrentChange(val) {
      getAgentProfit({
        page: val
      }).then(res => {
        if (res.data.code === 200) {
          this.accountInfo = res.data.data;
          this.pageInfo = res.data.pageInfo;
        }
      });
    },
    open(row){},
    del(row){},
    update(row){}
  },
  created() {
    this.getListAccDetail();
    this.getListWithMerChant();
    this.getListWithAgent()
  }
};
</script>

<style rel="stylesheet" lang="scss" scoped>
@import "../../styles/norlize.scss";
h2 {
  span {
    margin: 0 20px 0 0;
  }
}
</style>